<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card v-if="treeData.length" class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :row="company" :is-root="true" @addDept="onAdd" />
        <hr>
        <el-tree
          :data="treeData"
          :props="defaultProps"
        >
          <tree-tools slot-scope="{ data }" :row="data" @addDept="onAdd" @editDept="onEdit" />
        </el-tree>
      </el-card>
    </div>
    <!-- 弹出层 -->
    <add-dept v-if="dialogVisible" ref="DialogDept" v-model="dialogVisible" :node="dialogData" @success="loadDepartment" />
    <!-- /弹出层 -->
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept'
import { getDepartmentList } from '@/api/departments'
import { transListToTree } from '@/utils/index.js'
export default {
  components: { TreeTools, AddDept },
  data() {
    return {
      company: { manager: '负责人', id: '' },
      treeData: [],
      defaultProps: {
        label: 'name'
      },
      dialogVisible: false,
      dialogData: {}
    }
  },

  created() {
    this.loadDepartment()
  },

  methods: {
    async loadDepartment() {
      const res = await getDepartmentList()
      this.company.name = res.companyName
      this.treeData = transListToTree(res.depts, '')
    },
    onAdd(data) {
      this.dialogVisible = true
      this.dialogData = data
    },
    onEdit(data) {
      // 显示弹层
      this.dialogVisible = true
      // 子组件表单校验
      this.dialogData = data
      // 获取最新数据渲染表单
      this.$nextTick(_ => {
        this.$refs.DialogDept.getDeptInfo(data.id)
      })
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
